BootStrap

official::Bootstrap中文网

一、基础知识

1 简单使用

下载和安装：

  1. 下载 Bootstrap
  2. 解压，在项目的assets中新建一个文件夹叫plugins，然后将解压后的文件改名放进去。

使用：

  • bootstrap.css是开发版，便于开发者查看。bootstrap.min.css是生成版，它将代码都压缩在了一行，减少了空间的使用。实际打包上线中引入bootstrap.min.css即可。js同理。

报错：

  • Popper__namespace.createPopper is not a function，解决：将引入的bootstrap.js 更改为bootstrap.bundle.js。因为bootstrap.js 没有集成Popper.js 而 bootstrap.bundle.js集成了Popper.js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入css文件 -->
	<link rel="stylesheet" href="src/assets/plugins/bootstrap/css/bootstrap.css">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <!-- 引入js文件 -->
    <script src="src/assets/plugins/bootstrap/js/bootstrap.bundle.js"></script>
  </body>
</html>
<!-- 类写上bootstrap中的样式类名，css样式将会生效 -->
<input type="button" value="提交" />
<input type="button" value="提交" class="btn btn-primary" />
<input type="button" value="提交" class="btn btn-success" />
<input type="button" value="提交" class="btn btn-danger"/>
<input type="button" value="提交" class="btn btn-danger btn-sm" />

2 博客文档

顶端栏：official::Navbar · Bootstrap

<!-- App.vue -->
<template>
	<div class="container-fluid text-center">
		<div class="row">
			<Header />
		</div>
		<div class="row">
			<Main class="col-lg-8" />
			<Aside class="col-lg-4" />
		</div>
	</div>
</template>

二、常用属性

1 栅格参数

official::Grid system · Bootstrap

结构：container类中包含row类，row类中包含col类。

  • container默认左右外边距是auto，若要平铺则可以设置为container-fluid

非响应式：盒子不会随页面大小而改变所处位置。非响应式直接col-num

响应式：盒子会随页面大小而改变所处位置。响应式有col-sm-num、col-md-num、col-lg-num等，他们的区别在于改变位置的临界条件不一样。

列偏移：向后偏移。语法是offset-class-num col-class-num

<!-- 使用的基础语法 -->
<div class="container text-center">
  <div class="row">
    <div class="col">1 of 2</div>
    <div class="col">2 of 2</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col">2 of 3</div>
    <div class="col">3 of 3</div>
  </div>
</div>

<!-- 非响应式 -->
<div class="row">
    <div class="col-3" style="background-color: red;">1</div>
    <div class="col-9" style="background-color: green;">2</div>
</div>

<!-- 响应式 -->
<div class="row">
    <div class="col-sm-3" style="background-color: red;">1</div>
    <div class="col-sm-9" style="background-color: green;">2</div>
</div>

<!-- 列偏移 -->
<div class="row">
    <div class="offset-sm-5 col-sm-6" style="background-color: red;">1</div>
</div>

三、组件使用

1 Card

official::Cards · Bootstrap

卡片（card）取代了Bootstrap 3的面板（panels）、wells 以及缩略图（thumbnails）等组件。

常用card：

样式设置

<!-- 页脚若左右存在留白，可以添加下列代码（scoped是vue属性）-->
<style scoped>
div.card{
	padding-left: 0px !important;
	padding-right: 0px !important;
}
</style>